<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button type="primary" icon="el-icon-search" @click="TableSearch">搜 索</el-button>
                <el-button @click="Reset" icon="el-icon-delete">重 置</el-button>
            </div>
            <div class="tb-body">
                <el-form ref="searchFormRef" :model="searchForm" :inline="true" label-width="120px" :style="`flex:1;`">
                    <el-form-item label="标题" prop="Title">
                        <el-input v-model.trim="searchForm.Title" placeholder="请输入标题"></el-input>
                    </el-form-item>

                    <el-form-item label="话题类型">
                        <el-paged-select url="/TopicType/List" columnName="Name" columnValue="Id"
                            v-model="searchForm.TopicTypeId">
                        </el-paged-select>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>


        <el-dialog title="话题编辑" :visible.sync="editorShow" width="80%" :lock-scroll="true" height="800px">
            <el-form v-if="editorShow == true" ref="editModalForm" :rules="editModalFormRules" :model="formData"
                label-width="140px" size="mini">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题" prop="Title">
                            <el-input v-model.trim="formData.Title"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="话题类型" prop="TopicTypeId">
                            <el-paged-select url="/TopicType/List" columnName="Name" columnValue="Id"
                                v-model="formData.TopicTypeId">
                            </el-paged-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="封面" prop="Cover">
                            <el-upload-images :limit="1" v-model="formData.Cover"></el-upload-images>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主图" prop="ImageUrls">
                            <el-upload-images :limit="4" v-model="formData.ImageUrls"></el-upload-images>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="内容" prop="Content">
                            <el-tinymce v-model="formData.Content" :height="300"></el-tinymce>
                        </el-form-item>
                    </el-col>

                </el-row>


                <el-row type="flex" justify="end" align="bottom">
                    <el-form-item>
                        <el-button type="primary" plain @click="CreateOrEditForm()">确 定</el-button>
                        <el-button @click="editorShow = false">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>

        </el-dialog>


        <data-table ref="tableId" url="/Topic/List" :column="dataColum">
            <template v-slot:header>
                <el-button type="primary" plain icon="el-icon-edit" @click="ShowEditModal()">新 增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="ShowBatchDeleteModal()">批 量 删 除</el-button>
            </template>
            <template v-slot:operate="scope">
                <el-button type="text" @click="ShowEditModal(scope.row.Id)">修 改</el-button>
                <el-button type="text" v-if="scope.row.AuditStatus == 0 || scope.row.AuditStatus == 2"
                    @click="ShowAuditEditModal(scope.row.Id)">我要审核</el-button>
                <el-button type="text" @click="ShowAuditRecordModal(scope.row.Id, 'Topic')">审核记录</el-button>
                <el-button type="text" @click="ShowDeleteModal(scope.row.Id)">删 除</el-button>
            </template>
        </data-table>


        <el-dialog title="进行审核" :visible.sync="editorAuditShow" width="40%" :lock-scroll="true" height="800px">
            <el-form v-if="editorAuditShow == true" ref="editModalForm" :rules="editModalFormRules" :model="formData"
                label-width="140px" size="mini">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="审核意见" prop="AuditStatus">
                            <el-radio-group v-model="formData.AuditStatus">
                                <el-radio :label="1">同意</el-radio>
                                <el-radio :label="2">拒绝</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="审核意见" prop="AuditRemark">
                            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="formData.AuditRemark">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="end" align="bottom">
                    <el-form-item>
                        <el-button type="primary" @click="AuditCreateOrEditForm()">保 存</el-button>
                        <el-button @click="editorAuditShow = false">放 弃</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-dialog>
        <AuditStatusListDialog ref="AuditStatusListDialog"></AuditStatusListDialog>

    </div>
</template>

<script>
import store from '@/store';
import { mapGetters } from 'vuex'
import AuditStatusListDialog from "@/views/Components/AuditStatusListDialog.vue"

export default {
    name: "TopicList",
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'userId', 'loginTimePeriod', "user", 'userId', 'roleType', 'token'
        ])
    },
    components: {
        AuditStatusListDialog
    },
    data() {

        return {
            lock: 0,//用来防止重复提交的变量
            searchForm: {},//搜索定义的数据对象
            dataColum: [
                {
                    key: "Id",
                    hidden: true,

                },
                {
                    key: "Title",
                    title: "标题",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "AuditStatus",
                    hidden: true,
                },

                {
                    key: "TopicTypeDto.Name",
                    title: "话题类型",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "Cover",
                    title: "封面",
                    type: store.getters.columnType.IMAGES,
                },
                {
                    key: "ImageUrls",
                    title: "主图",
                    type: store.getters.columnType.IMAGES,
                },
                {
                    key: "ViewCount",
                    title: "浏览数",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "Content",
                    title: "内容",
                    type: store.getters.columnType.RICHTEXT,

                },
                {
                    key: "IsRecommand",
                    title: "是否推荐",
                    type: store.getters.columnType.JUDGMENTTAG,
                },
                {
                    key: "AuditStatusFormat",
                    title: "审核状态",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "TopicTypeId",
                    hidden: true,
                },
                {
                    title: "操作",
                    width: "300px",
                    type: store.getters.columnType.USERDEFINED,
                },
            ],
            editModalFormRules: {
                "Title": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

                "Cover": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "AuditStatus": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "AuditRemark": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "ImageUrls": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

                "ViewCount": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

                "Content": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

                "TopicTypeId": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

            },
            formData: {

            },//表单
            editorShow: false,//控制编辑框是否显示
            editorAuditShow: false,//控制编辑框是否显示
        };
    },
    created() {

    },
    methods: {
        //点击审核
        async ShowAuditEditModal(Id) {
            let { Data } = await this.$Post(`/Topic/Get`, { Id: Id });
            Data.AuditRemark = "";
            this.formData = Data;
            this.formData.Behavior = '进行审核';
            this.formData.AuditUserId = this.userId;
            this.formData.Scope = "管理员审核";

            this.editorAuditShow = true;
        },
        //审核保存
        async AuditCreateOrEditForm() {
            if (this.lock == 1) return;
            this.$refs.editModalForm.validate(async valid => {
                if (valid) {
                    this.lock = 1;
                    var { Success } = await this.$PostLoading(`/Topic/CreateOrEdit`, this.formData);
                    this.lock = 0;
                    if (Success) {
                        await this.$refs.AuditStatusListDialog.AddRecord(this.formData.Id, "Topic", this.formData.AuditRemark, this.formData.AuditStatus, this.formData.Scope);
                        this.editorAuditShow = false;
                        this.$refs.tableId.reload(this.searchForm);
                    }
                }
            })
        },
        //查看审核状态
        async ShowAuditRecordModal(Id, Type) {
            this.$refs.AuditStatusListDialog.Show(Id, Type);
        },

        /**
         * 点击新增或者编辑的时候会触发
         */
        async ShowEditModal(Id) {

            let { Data } = await this.$Post(`/Topic/Get`, { Id: Id });
            this.formData = Data;
            this.formData.Behavior = null;

            this.formData.IsEdit = Id != undefined;

            if (Id == undefined) {
                this.formData.AuditStatus = 0;
                this.formData.IsRecommand = 0;
            }
            this.editorShow = true;

        },
        /**
         * 点击保存的时候会触发
         */
        async CreateOrEditForm() {
            if (this.lock == 1) return;
            this.$refs.editModalForm.validate(async valid => {
                if (valid) {
                    this.lock = 1;
                    var { Success } = await this.$PostLoading(`/Topic/CreateOrEdit`, this.formData);
                    this.lock = 0;
                    if (Success) {
                        this.editorShow = false;
                        this.$refs.tableId.reload(this.searchForm);
                    }
                }
            })
        },
        /**
         * 单个删除的时候会触发
         */
        async ShowDeleteModal(Id) {
            await this.$PostDelete(`/Topic/Delete`, { Id: Id });
            this.$refs.tableId.reload(this.searchForm);
        },
        /**
         * 批量删除的时候会触发
         */
        async ShowBatchDeleteModal() {
            var ids = this.$refs.tableId.GetSelectionRow().map(x => x.Id);
            await this.$PostDelete(`/Topic/BatchDelete`, { Ids: ids });
            this.$refs.tableId.reload(this.searchForm);
        },
        /**
         * 点击表格搜索按钮会触发
         */
        async TableSearch() {
            this.$refs.tableId.reload(this.searchForm);
        },
        /**
         * 点击清空表单会触发
         */
        async Reset() {
            this.searchForm = {};
            this.$refs.tableId.reload(this.searchForm);
        },

        /**
         * 导入成功
         */
        async ImportSuccess() {

            this.$refs.tableId.reload(this.searchForm);
        },


    },
};
</script>
